<template>
  <div>
    <div class="pb-[8px]">
      <!-- <div class="text-[18px] font-[500] text-[--sub-color] pr-[8px]">
        {{ props.mainCategory.esName }}
      </div> -->
      <!-- <div
        class="wrapper flex-1 flex items-center gap-8 text-[16px] font-[300] text-[#5C5C5C]"
      > -->
      <div class="flex items-center">
        <div>
          <n-tabs v-model:value="currentKey" :bar-width="28">
            <template #prefix>
              <div class="text-[18px] font-[500] text-[--main-color] pr-[8px]">
                {{ props.mainCategory.esName }}
              </div>
            </template>
            <!-- <n-tab name="oasis" tab="Oasis">
            <div class="text-[#5C5C5C]">Wonderwall</div>
          </n-tab>
          <n-tab name="the beatles" tab="the Beatles"> Hey Jude </n-tab>
          <n-tab name="jay chou" tab="周杰伦"> 七里香 </n-tab> -->
            <n-tab name="" :class="currentKey == '' ? 'selected' : ''" @click="getData()">
              <div class="text-[#5C5C5C]">{{ $t("common.所有") }}</div>
            </n-tab>
            <n-tab
              v-for="(itme, i) in categoryData"
              :key="i"
              :name="itme.esName"
              @click="getData(itme.esName)"
              :class="currentKey == itme.esName ? 'selected' : ''"
            >
              <div class="text-[#5C5C5C]">{{ itme.esName }}</div>
            </n-tab>
          </n-tabs>
        </div>
        <div class="flex-1 text-right">
          <moreLink :to="`/#/search/${props.mainCategory.esName}`"></moreLink>
        </div>

        <!-- <div :class="currentKey == '' ? 'selected' : ''" @click="getData()">
          {{ $t("common.所有") }}
        </div>
        <div
          v-for="(itme, i) in categoryData"
          :key="i"
          @click="getData(itme.esName)"
          :class="currentKey == itme.esName ? 'selected' : ''"
        >
          {{ itme.esName }}
        </div>
        <div class="flex-1 text-right">
          <moreLink :to="`/#/search/${props.mainCategory.esName}`"></moreLink>
        </div> -->
      </div>
    </div>
    <div class="flex gap-4">
      <!-- <div class="rounded-[6px] h-[726px] w-[180px] text-0 overflow-hidden">
        <img
          class="w-full h-full"
          src="https://rakumart.oss-ap-northeast-1.aliyuncs.com/banner/nan.png"
        />
      </div> -->
      <n-spin class="flex-1" :show="loading">
        <template #description>
          <div class="text-[--main-color]">{{ $t("common.加载中") }}...</div>
        </template>
        <div class="grid grid-cols-5 gap-4 min-h-[100px]">
          <div v-for="(goods, i) in goodsList" :key="i">
            <goodsCard :goods="goods"></goodsCard>
          </div>
        </div>
      </n-spin>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import goodsCard from "@/components/goodsCard";
import { commoditySearch } from "@/api/product";
import moreLink from "@/components/moreLink";
import { useUser } from "@/stores/user";
const { category } = toRefs(useUser());
const goodsList = ref([]);
const loading = ref(false);
const currentKey = ref("");
const props = defineProps({
  mainCategory: Object,
});
const categoryData = computed(() => {
  const p = category.value.find((x) => x.id == props.mainCategory.id);
  if (p) {
    return p.children.filter((x) => x.recommend).slice(0, 4);
  }
  return [];
});

onMounted(() => {
  getData();
});
const getData = async (key) => {
  loading.value = true;
  // currentKey.value = key || "";
  const { data } = await commoditySearch({
    keywords: key || props.mainCategory.name,
    pageSize: 10,
    page: 1,
  });
  goodsList.value = data.data.data;
  loading.value = false;
};
</script>

<style lang="scss" scoped>
.wrapper {
  > div {
    cursor: pointer;
    transition: color 0.5s;
    &:hover {
      color: var(--sub-color);
    }
  }
}

.selected {
  color: var(--sub-color);
}
</style>
